<script setup lang='ts'>
import { nextTick, onMounted, ref, computed } from "vue";
import { useRouter, useRoute } from 'vue-router'
import { useCounterStore } from '@/stores/users';
import { useDetailStore } from '@/stores/detail';
import { ImagePreview } from 'vant';

// 使用用户
const userStore = useCounterStore();
// 使用地址pinia
const shopDetail = useDetailStore();
// 使用路由
const router = useRouter();
const route = useRoute();
// 气泡
const showPopover = ref(false);
// 分享
const showShare = ref(false)
const actions = [
    { text: '首页', icon: 'wap-home-o', url: '/' },
    { text: '购物车', icon: 'shopping-cart-o', url: '/cart' },
    { text: '分享', icon: 'share-o' },
];
// 气泡跳转函数
const actionHandler = (params: any) => {
    console.log(params);

    if (params.url) {//有url就往url进行跳转
        router.push(params.url)
    } else {
        // 没有地址那就是分享
        showShare.value = true
    }
}
// 分享
const options = [
    [
        { name: '微信', icon: 'wechat' },
        { name: '朋友圈', icon: 'wechat-moments' },
        { name: '微博', icon: 'weibo' },
        { name: 'QQ', icon: 'qq' },
    ],
    [
        { name: '复制链接', icon: 'link' },
        { name: '分享海报', icon: 'poster' },
        { name: '二维码', icon: 'qrcode' },
        { name: '小程序码', icon: 'weapp-qrcode' },
    ],
];

// 轮播图
const images = [
    'https://fastly.jsdelivr.net/npm/@vant/assets/apple-1.jpeg',
    'https://fastly.jsdelivr.net/npm/@vant/assets/apple-1.jpeg',
    'https://fastly.jsdelivr.net/npm/@vant/assets/apple-1.jpeg',
    'https://fastly.jsdelivr.net/npm/@vant/assets/apple-1.jpeg',
    'https://fastly.jsdelivr.net/npm/@vant/assets/apple-1.jpeg',

];
//  控制视频弹出层
const show = ref(false)
// 控制视频是否播放
const video: any = ref('')
// 视频播放器
const showPopup = () => {
    show.value = true
    //打开的时候,播放视频
    nextTick(() => {//异步代码,微任务,解决数据后加载问题
        video.value.play()
    })
}
// 关闭弹出层函数
const closePopup = () => {
    //关闭的时候,暂停视频
    video.value.pause()
}
// 获取商品详情
onMounted(() => {
    shopDetail.getDetailInfoHandler((route.params.proid as string))
})
//   使用计算属性获取商品详情

const getDetailInfo = computed(() => {
    //判断数据
    if (JSON.stringify(shopDetail.detailInfoMsg) != '{}') {
        return shopDetail.detailInfoMsg;
    }
})


// 预览图片
const previewImg = (index: number) => {
    // 点击显示一个
    // ImagePreview([getDetailInfo.value.banners[index]]);
    ImagePreview(getDetailInfo.value.banners); 
}

// 购物车添加
const addCard = () => {
    // 发请求添加
     //收集三个数据
     let obj = {
        userid:userStore.userid,
        proid:route.params.proid,
        num:1
    }
    shopDetail.addCartInfoHandler(obj)
   
}
</script>
<template>
    <div class="detail">
        <!-- TODO 头部 -->
        <van-nav-bar title="详情" left-text="返回" left-arrow @click-left="$router.go(-1)">
            <template #right>
                <!-- 气泡 -->
                <van-popover @select="actionHandler" v-model:show="showPopover" :actions="actions"
                    placement="bottom-end" theme="dark">
                    <template #reference>
                        <van-icon name="ellipsis" size="22" />
                    </template>
                </van-popover>
            </template>
        </van-nav-bar>
        <!-- 头部分享功能 -->
        <van-share-sheet v-model:show="showShare" title="立即分享给好友" :options="options" />
        <!-- 轮播图 -->
        <div class="bannerList">
            <van-swipe class="my-swipe" :autoplay="3000" indicator-color="red" lazy-render>
                <van-swipe-item v-for="item, index in getDetailInfo?.banners" :key="index">
                    <img :src="item" @click="previewImg(index)" />
                </van-swipe-item>
            </van-swipe>
            <div class="icon">
                <van-icon name="play-circle" size="26px" color="red" @click="showPopup" />
            </div>
            <!-- -->
            <van-popup v-model:show="show" @close="closePopup">
                <video ref="video" width="300"
                    src="https://jvod.300hu.com/vod/product/b1024a62-8c46-464c-8ec7-f57d26cceb38/42f70c8e8bbb442e986874ec556fc882.mp4"></video>
            </van-popup>
        </div>
        <!-- 文字信息 -->
        <div class="message">
            <p class="price">¥&nbsp;<span>{{ getDetailInfo?.originprice }}</span></p>
            <p class="msg">
                <span class="zy">自营</span>
                <span class="desc">{{ getDetailInfo?.proname }}</span>
            </p>
        </div>
        <!-- 底部 -->
        <van-action-bar>
            <van-action-bar-icon icon="cart-o" text="购物车" @click="$router.push('/cart')" />
            <van-action-bar-button type="warning" text="加入购物车" @click="addCard" />
            <van-action-bar-button type="danger" text="立即购买" />
        </van-action-bar>

    </div>
</template>
<style scoped lang='scss'>
.bannerList {
    position: relative;

    .icon {
        position: absolute;
        bottom: 50px;
        left: 50%;
        transform: translateX(-50%);
        background-color: #fff;
        border-radius: 50%;
    }
}

.my-swipe .van-swipe-item {
    color: #fff;
    font-size: 20px;
    line-height: 150px;
    text-align: center;
    background-color: #39a9ed;
    height: 750px;

    img {
        width: 100%;
        height: 100%;
        display: block;
    }
}

.message {
    .price {
        color: red;
        font-weight: 700;
        font-size: 18px;
    }

    .msg {
        .zy {
            background-color: red;
            color: #fff;
            font-weight: 700;
            padding: 10px;
            margin-right: 10px;
            border-radius: 6px;
        }

        .desc {
            font-weight: 700;
            color: #000;
            font-size: 16px;
            line-height: 62px;
        }
    }
}
</style>